<template>
  <div class="relicUpdate">
        <div class="title">
            <span>文物管理 | 文物修改</span>
        </div>
        <div class="content">
          <h3>修改文物</h3>
          <form @submit.prevent="updateRelic">
          <div class="items">
            <span>文物名称&nbsp;:</span>
            <input type="text" v-model="relic.name" required>
          </div>
          <div class="items">
            <span>分&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类&nbsp;:</span>
            <el-select v-model="grouptypeValue" clearable placeholder="请选择分类" required>
                <el-option
                  v-for="item in groupTypeList"
                  :key="item.id"
                  :label="item.label"
                  :value="item.classificationCode">
                </el-option>
            </el-select>
          </div>
          <div class="items">
            <span>地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;域&nbsp;:</span>
            <el-select v-model="localtypeValue" clearable placeholder="请选择地域" required>
                <el-option
                  v-for="item in LocalTypeList"
                  :key="item.id"
                  :label="item.label"
                  :value="item.classificationCode">
                </el-option>
            </el-select>
          </div>
          <div class="items">
            <span>年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;代&nbsp;:</span>
            <el-select v-model="decadetypeValue" clearable placeholder="请选择年代" required>
                <el-option
                  v-for="item in decadeTypeList"
                  :key="item.id"
                  :label="item.label"
                  :value="item.classificationCode">
                </el-option>
            </el-select>
          </div>
          <div class="items">
            <span>图案纹样&nbsp;:</span>
            <input type="text" v-model="relic.pattern" required >
          </div>
          <div class="items">
            <span>物件类型&nbsp;:</span>
            <input type="text" v-model="relic.types" required>
          </div>
          <div class="items">
            <span>制作工艺&nbsp;:</span>
            <input type="text" v-model="relic.technology" required>
          </div>
          <div class="items uploadImage">
          <span>图片上传&nbsp;:</span>
          <img v-show="fileList.length==0" :src="getImageUrl(relic.image)" />
          <div class="uploadArea">
            <el-upload
              action="#"
              :on-exceed="handleExceed"
              :file-list="fileList"
              :on-change="handleChange"
              :limit="1"
              list-type="picture-card"
              :auto-upload="false"
            >
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{ file }">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="200%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </div>
        </div>
          <button type="submit" class="updateRelic" >提交修改</button>
          </form>
        </div>
  </div>
</template>

<script>
import { searchDecade, searchLocal, searchTypes } from "@/api/all";
import { Message } from 'element-ui';
import { mapState, mapMutations } from "vuex";
import { upload } from "@/api/admin";
export default {
    name: "relicUpdate",
    data(){
      return{
        decadetypeValue:"",
        grouptypeValue:"",
        localtypeValue:"",
        decadeTypeList: [],
        groupTypeList: [],
        LocalTypeList: [],
        relic:{},
        fileList: [],
        dialogImageUrl: "",
        dialogVisible: false,
        disabled: false,
      }
    },
    created() {
         this.relic = JSON.parse(this.$route.query.relic);
         this.decadetypeValue=this.relic.decadeType
         this.grouptypeValue=this.relic.groupType
         this.localtypeValue=this.relic.localType
      },
    mounted(){
      this.init();
    },
    methods:{
      ...mapMutations("list",["SETRELICLIST"]),
    ...mapMutations("sort", [
      "SET_DECADETYPE",
      "SET_GROUPTYPE",
      "SET_LOCALTYPE",
    ]),
    async init() {
      //获取后端年代分类数据
      await searchDecade()
        .then((res) => {
          if (res.data.code === 200) {
            this.decadeTypeList = res.data.data.decadeTypeList;
            this.isGetDecade = true;
            this.SET_DECADETYPE(this.decadeTypeList);
          }
        })
        .catch((error) => {
          console.log(error);
        });

      //获取后端材质分类数据
      await searchTypes()
        .then((res) => {
          if (res.data.code === 200) {
            this.groupTypeList = res.data.data.groupTypeList;
            this.isGetGroup = true;
            this.SET_GROUPTYPE(this.groupTypeList);
          }
        })
        .catch((error) => {
          console.log(error);
        });

      //获取后端地域分类数据
      await searchLocal()
        .then((res) => {
          if (res.data.code === 200) {
            this.LocalTypeList = res.data.data.LocalTypeList;
            this.isGetLocal = true;
            this.SET_LOCALTYPE(this.LocalTypeList);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getImageUrl(imageName) {
      const prefix = this.$imagePrefix;
      console.log(prefix);
      return `${prefix}${imageName}`;
    },
    updateRelic(){
      this.confirmUpload();
    },
     //删除上传的图片
     handleRemove(file) {
      this.fileList = [];
    },
    //要求只能上传一张图片
    handleExceed(files, fileList) {
      Message.error('只能上传一张图片，请删除文件后重新上传');
    },
    //进行图片放大显示
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
     //规定上传文件格式要求，把上传的图片存入数组
     handleChange(file, fileList) {
      if (!(file.raw.type === 'image/jpeg' || file.raw.type === 'image/png')){
        Message.error('只能上传 JPG/PNG 格式的图片！');
        return false
      }
      else this.fileList = fileList;
    },
    async confirmUpload() {
      const formData = new FormData();
      const file = this.fileList[0].raw;
      formData.append("file", file);
      formData.append('relic', JSON.stringify(this.Relic));
      await upload(formData)
        .then((res) => {
          if (res.data.code === 200) {
            if (res.data.message === "Ok") {
              Message.success("添加成功");
              this.dialogOfUpload = false;
            }
          }
        })
        .catch((error) => {
          console.error(error);
        });
    },
  }

}
</script>

<style scoped>
  .relicUpdate{
  min-height: 100vh;
}
.title{
  display: flex;
  height:50px;
  line-height: 50px;
  color:#666666;
  margin-bottom: 20px;
  font-size: 18px;
}
.content {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  width: 650px;
  height: 900px;
  margin: 0px auto;
  background: rgba(232, 231, 231, 0.6);
  box-shadow: 10px 10px 25px #666666;
  border-radius: 10px;
}
h3{
  display: block;
  text-align: center;
  color:#666666;
  height: 40px;
  margin:30px auto;
}
.items{
 /* flex:1; */
 width: auto;
 height:60px;
}
.items span{
display:inline-block;
width:100px;
text-align: left;
color:#666666;
font-size: 16px;
}
.items input{
  height:40px;
  padding:5px;
  color:#4a4949;
  border:1px solid #c0c0c0;
  border-radius: 10px;
  width:350px;
  font-size: 14px;
    color:#666666;
  vertical-align: middle;
}
.el-select{
    width:350px !important;
}
.el-input__inner{
  border-radius: 10px !important;
}
.el-select-dropdown__list .selected{
    color: #215c3d !important;
}
/* .uploadImage {
  width: 400px;
  height: 200px;
  line-height: 200px;
} */
.upload-demo {
  display: flex;
  width: 300px;
  margin: 0px auto;
  flex-direction: column;
  justify-content: center;
}
.uploadArea {
  display: inline-block;
  vertical-align: middle;
}
.uploadfileImage {
  vertical-align: middle;
}
.updateRelic {
  background: rgba(42, 81, 77, 1);
  color: #fff;
  width: 500px;
  height: 35px;
  border-radius: 4px;
  margin: 150px auto 30px;
  border: 1px solid #215c3d;
  transition: all 0.3s;
}
.updateRelic:hover {
  cursor: pointer;
  box-shadow: 15px 5px 25px #929493;
}
.uploadImage img{
  display: inline-block;
  vertical-align: middle;
  width:148px;
  height:148px;
}
</style>
